<template>
  <div class="container">
	
	<div style="position: absolute;z-index:10000;margin-top:5px;margin-left:160px;">
	请选择公司：<select id="chartSelect" @change="redraw" v-model="selectedOption" >
		 <option v-for="option in options" :value="option.value" :key="option.value">{{ option.label }}</option>    
	</select>
	</div>
	
	<div id="myChart" style="width:1000px; height: 500px"></div>
  </div>
</template>
<script>
import { FriLink } from '@/model/friLink'

import * as echarts from 'echarts';

export default {
  data() {
    return {
      selectedOption: '', // 初始值为空字符串  
      options: [] // 用于存储选项的数组  
	  
      ,posList: []
      ,indicat: []
      ,v: []
    }
  },
  
  name: "chart",
  props: {
    //chartId: "aaaaa",
    xData: Array,
    // itemData: Array,
    series: Array,
    legend: Object
  },
  
  watch: {
    // xData: function(val){
    //   this.renderChart();
    // },
    series: function(val) {
      this.renderChart();
    }
  },
  
  created() {  
	this.getComanyList();
    
  },  
  
  mounted() {
	this.drawLine(this.selectedOption);
  },
  
  methods: {
  	async getComanyList(){
		const comList = await FriLink.companyList()
		
		// 将获取到的选项值赋值给options数组  
		for (let i = 0; i < comList.length; ++i) {
			var op ={};
			op.value=comList[i].id
			op.label=comList[i].name
			this.options.push(op)
		}
		
		console.info("options")
		console.info(this.options)
		console.info("options")
	
    },
	redraw(){
		this.drawLine(this.selectedOption)
    },
	// 渲染折线图
	async drawLine (day) {
		console.info("day")
		console.info(day)
		console.info("day")
		this.indicat=[]
		this.v=[]
		this.posList=[]
		if(day!=''){
			console.info(day)
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('myChart'));
			
			const pList = await FriLink.posByCompanyCt(day)
			//[{"id":1,"name":"Java开发","pos_num":3},{"id":13,"name":"python开发","pos_num":1},{"id":2,"name":"C++开发","pos_num":1},{"id":18,"name":"其他","pos_num":1}]
			console.info(222)
				console.info(pList)
			console.info(222)
			for (let i = 0; i < pList.length; ++i) {
				this.posList.push(pList[i]);
				var p ={}
				p.text=pList[i].name
				p.max=5
				this.indicat.push(p);
				
				console.info(3333)
				console.info(this.indicat)
				console.info(333)
				
				this.v.push(pList[i].pos_num)
			}
					
			// 绘制图表
			myChart.setOption({
				  title: {
					text: '需求数雷达图'
				  },
				  tooltip: {
					trigger: 'axis'
				  },
				  legend: {
					left: 'center',
					data: [
					  '企业1'
					]
				  },
				  radar: [
					{
					  //indicator: [
					//	{ text: '管理岗位', max: 100 },
					//	{ text: '技术岗位', max: 100 },
					//	{ text: '销售岗位', max: 100 }
					 // ],
					  indicator: this.indicat,
					  center: ['25%', '40%'],
					  // 半径轴配置  
					  radiusAxis: {  
					    min: 0, // 最小值  
					    max: 20, // 最大值  
					    interval: 1 // 间隔  
					  },  
					  //角度轴配置  
						angleAxis: {  
						min: 0, // 最小值  
						max: 20 // 最大值  
						},  
					  radius: 80
					
					}

				  ],
				  series: [
					{
					  type: 'radar',
					  tooltip: {
						trigger: 'item'
					  },
					  areaStyle: {},
					  data: [
						{
						  //value: [60, 73, 85],
						  value: this.v,
						  //name: '企业1'
						}
					  ]
					}
				  ]
				  
				  
	  
			});
		
		
		}
		
	}
  
    
  
  },
}
</script>

<style lang="scss" scoped>

</style>
